<template>
  <div class="text-xs text-white bg-[#232728] relative">
    <div class="p-5 flex justify-between items-center">
      <p class="text-base lg:hidden">{{ $mt('Select Denomination') }}</p>
      <w-image class="w-6 h-6" @click="closePopup" :src="useAsset('h5-detail-select/close.png')" />
    </div>
    <div
      class="max-h-[400px] pb-16 overflow-y-auto rounded-xl border-y-[.5px] border-[#3b4245] border-[solid] bg-[#232728] px-5 py-5 lg:max-h-[unset] lg:border-[0] lg:bg-[unset] lg:px-0 lg:py-0">
      <template v-if="curGoodsSkuList.length">
        <!--        小屏-->
        <div
          :class="{ active: curSkuId === item.id }"
          class="lg:hidden relative mb-3.5 cursor-pointer flex items-start rounded-md border-[2px] border-[transparent] bg-[#393d3e] py-3 pl-2.5 pr-8 lg:py-8"
          v-for="(item, index) in curGoodsSkuList"
          @click="handleSelectItem(item, index)"
          :key="index">
          <!-- 选中的勾 -->
          <WImage
            v-if="curSkuId === item.id"
            class="w-7 h-4 absolute right-[-1px] top-[-1px]"
            :src="useAsset('h5-detail-select/item_icon_Selected.png')" />
          <!-- 图片 -->
          <div class="mr-3 shrink-0 w-12">
            <YImage class="mx-auto h-12" :src="item.smallIcon || curGoodsDetail.smallIcon" height="50" />
          </div>
          <!-- right-->
          <div>
            <h3 class="font-bold text-sm leading-5 mb-2.5">{{ item.name }}</h3>
            <!--            <p class="text-[#9acd32]" v-if="item.discount">-->
            <!--              {{ $mt('Current Discount') }}: {{ $calcDiscount(item.discount) }}-->
            <!--            </p>-->
            <div class="flex items-center">
              <p class="text-red1 text-sm font-bold mr-2.5">{{ $calcPrice(item.price) }}</p>
              <p class="text-[rgba(255,255,255,0.6)] text-sm line-through" v-if="item.discount">
                {{ $calcPrice(item.originalPrice) }}
              </p>
            </div>
          </div>
        </div>
        <!--        大屏-->
        <div
          :class="{ active: curSkuId === item.id }"
          class="hidden lg:flex mb-4 cursor-pointer items-center justify-between rounded-2xl border-[2px] border-[transparent] bg-[#23282a] p-4 lg:py-8"
          v-for="(item, index) in bigSkuList"
          @click="handleSelectItem(item, index)"
          :key="index">
          <div class="flex items-center mr-2">
            <div
              :class="{ 'is-active': curSkuId === item.id }"
              class="flex shrink-0 h-4 mr-5 w-4 items-center justify-center rounded-[50%] bg-[#393e40]">
              <van-icon size="12px" v-if="curSkuId === item.id" name="success" />
            </div>
            <div>
              <h2 class="font-[500]">{{ item.name }}</h2>
              <p class="text-[#9acd32]" v-if="item.discount">
                {{ $mt('Current Discount') }}: {{ $calcDiscount(item.discount) }}
              </p>
            </div>
          </div>
          <p class="text-[#02bbff]">{{ $calcPrice(item.price) }}</p>
        </div>
        <div
          @click="viewMoreSkuList"
          v-if="curGoodsSkuList.length > 5"
          class="hidden lg:flex items-center justify-center cursor-pointer">
          <div class="flex items-center">
            <p class="mr-2">{{ bigSkuList.length === curGoodsSkuList.length ? $mt('Collapse') : $mt('View More') }}</p>
            <van-icon v-if="bigSkuList.length !== curGoodsSkuList.length" name="arrow-down" size="16" />
            <van-icon v-else name="arrow-up" size="16" />
          </div>
        </div>
      </template>
      <div class="bg-[#23282a] rounded-2xl" v-else>
        <common-empty />
      </div>
    </div>
    <!-- 确定按钮 -->
    <div
      @click="closePopup"
      class="mx-auto absolute bottom-0 w-full p-2.5 h-16 lg:hidden bg-gradient-to-b from-[rgba(0,0,0,0.8)] from-10% to-[rgba(0,0,0,0.6)] to-100%">
      <div class="text-sm w-full h-full font-[500] bg-red1 rounded-sm text-center leading-12">
        {{ $mt('CONFIRM') }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGoodsStore } from '~/store/goods'
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'

const emits = defineEmits(['changeIsShow'])
const props = withDefaults(defineProps<{ isShow?: boolean }>(), {})

//
const goodsStore = useGoodsStore()
const { curGoodsSkuList, curSkuId, curGoodsDetail } = storeToRefs(goodsStore)
const bigSkuList = ref(curGoodsSkuList.value.slice(0, 5))

const handleSelectItem = (item: any, index: number) => {
  goodsStore.setCurSkuId(item.id)
}

// 保存选中商品的信息，并且关闭弹窗
const closePopup = () => {
  emits('changeIsShow', false)
}
// 展开全部的 list
const viewMoreSkuList = () => {
  if (bigSkuList.value.length !== curGoodsSkuList.value.length) {
    bigSkuList.value = curGoodsSkuList.value
  } else {
    bigSkuList.value = curGoodsSkuList.value.slice(0, 5)
  }
}
</script>

<style scoped lang="scss">
.active {
  border: 2px solid #eb414e;
}

.is-active {
  background-color: #eb414e;
}
</style>
